<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>css关键概念 | jzhmcoo1</title><meta name="keywords" content="前端,css"><meta name="author" content="lixing"><meta name="copyright" content="lixing"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="参考链接 CSS（层叠样式表） | MDN (mozilla.org)  CSS关键概念总览 CSS优先级 优先级 - CSS（层叠样式表） | MDN (mozilla.org)  浏览器通过优先级来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。 优先级如何计算优先级就是分配给指定的 CSS 声明的一个权重，它由 匹配的选择器中的 每一">
<meta property="og:type" content="article">
<meta property="og:title" content="css关键概念">
<meta property="og:url" content="https://www.lihangzhu.com/2021/06/26/Css-Core-Concepts/index.html">
<meta property="og:site_name" content="jzhmcoo1">
<meta property="og:description" content="参考链接 CSS（层叠样式表） | MDN (mozilla.org)  CSS关键概念总览 CSS优先级 优先级 - CSS（层叠样式表） | MDN (mozilla.org)  浏览器通过优先级来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。 优先级如何计算优先级就是分配给指定的 CSS 声明的一个权重，它由 匹配的选择器中的 每一">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://gitee.com/jzhmcoo1/jzhmcoo1picrepo/raw/master/img/css.png">
<meta property="article:published_time" content="2021-06-26T02:53:41.000Z">
<meta property="article:modified_time" content="2021-06-26T02:53:45.000Z">
<meta property="article:author" content="lixing">
<meta property="article:tag" content="前端">
<meta property="article:tag" content="css">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://gitee.com/jzhmcoo1/jzhmcoo1picrepo/raw/master/img/css.png"><link rel="shortcut icon" href="/images/favicon.png"><link rel="canonical" href="https://www.lihangzhu.com/2021/06/26/Css-Core-Concepts/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><meta name="google-site-verification" content="pcqGakY4hww-Mg9iGN4mQw6v_y_IRvYmM1l50SAcPpg"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: {"path":"search.xml","languages":{"hits_empty":"找不到您查询的内容：${query}"}},
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '天',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  source: {
    jQuery: 'https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js',
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css'
    },
    fancybox: {
      js: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js',
      css: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: true,
  isanchor: true
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = { 
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2021-06-26 10:53:45'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
          const isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches
          const isNotSpecified = window.matchMedia('(prefers-color-scheme: no-preference)').matches
          const hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified

          if (t === undefined) {
            if (isLightMode) activateLightMode()
            else if (isDarkMode) activateDarkMode()
            else if (isNotSpecified || hasNoSupport) {
              const now = new Date()
              const hour = now.getHours()
              const isNight = hour <= 6 || hour >= 18
              isNight ? activateDarkMode() : activateLightMode()
            }
            window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) {
              if (saveToLocal.get('theme') === undefined) {
                e.matches ? activateDarkMode() : activateLightMode()
              }
            })
          } else if (t === 'light') activateLightMode()
          else activateDarkMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const fontSizeVal = saveToLocal.get('global-font-size')
    if (fontSizeVal !== undefined) {
      document.documentElement.style.setProperty('--global-font-size', fontSizeVal + 'px')
    }
    })(window)</script><meta name="generator" content="Hexo 5.4.0"><link rel="alternate" href="/atom.xml" title="jzhmcoo1" type="application/atom+xml">
</head><body><div id="loading-box"><div class="loading-left-bg"></div><div class="loading-right-bg"></div><div class="spinner-box"><div class="configure-border-1"><div class="configure-core"></div></div><div class="configure-border-2"><div class="configure-core"></div></div><div class="loading-word">加载中...</div></div></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="author-avatar"><img class="avatar-img" data-lazy-src="https://jzhmcoo1-1258918430.cos.ap-shanghai.myqcloud.com/markdown/avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="site-data"><div class="data-item is-center"><div class="data-item-link"><a href="/archives/"><div class="headline">文章</div><div class="length-num">36</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/tags/"><div class="headline">标签</div><div class="length-num">37</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/categories/"><div class="headline">分类</div><div class="length-num">9</div></a></div></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fas fa-heartbeat"></i><span> 娱乐</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page" href="/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/message/"><i class="fa-fw fa fa-coffee"></i><span> 留言板</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-user-friends"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于我</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://gitee.com/jzhmcoo1/jzhmcoo1picrepo/raw/master/img/css.png')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">jzhmcoo1</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fas fa-heartbeat"></i><span> 娱乐</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page" href="/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/message/"><i class="fa-fw fa fa-coffee"></i><span> 留言板</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-user-friends"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于我</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">css关键概念</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2021-06-26T02:53:41.000Z" title="发表于 2021-06-26 10:53:41">2021-06-26</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2021-06-26T02:53:45.000Z" title="更新于 2021-06-26 10:53:45">2021-06-26</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/StudyNotes/">StudyNotes</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">6.2k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>21分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="参考链接"><a href="#参考链接" class="headerlink" title="参考链接"></a>参考链接</h1><blockquote>
<p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS">CSS（层叠样式表） | MDN (mozilla.org)</a></p>
</blockquote>
<h1 id="CSS关键概念总览"><a href="#CSS关键概念总览" class="headerlink" title="CSS关键概念总览"></a>CSS关键概念总览</h1><p><img src= "/img/loading.gif" data-lazy-src="https://jzhmcoo1-1258918430.cos.ap-shanghai.myqcloud.com/markdown/css%E5%85%B3%E9%94%AE%E6%A6%82%E5%BF%B5.png" alt="CSS关键概念"></p>
<h1 id="CSS优先级"><a href="#CSS优先级" class="headerlink" title="CSS优先级"></a>CSS优先级</h1><blockquote>
<p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity">优先级 - CSS（层叠样式表） | MDN (mozilla.org)</a></p>
</blockquote>
<p>浏览器通过<strong>优先级</strong>来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类<a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/CSS/CSS_Reference#selectors">选择器</a>组成的匹配规则。</p>
<h2 id="优先级如何计算"><a href="#优先级如何计算" class="headerlink" title="优先级如何计算"></a>优先级如何计算</h2><p>优先级就是分配给指定的 CSS 声明的一个权重，它由 匹配的选择器中的 每一种选择器类型的 数值 决定。</p>
<p>而当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候，CSS 中最后的那个声明将会被应用到元素上。</p>
<p>当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的 CSS 规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。</p>
<h2 id="选择器类型"><a href="#选择器类型" class="headerlink" title="选择器类型"></a>选择器类型</h2><p>下面的优先级是逐级<strong>递增</strong>的：</p>
<ol>
<li> 标签(类型)选择器(<code>h1</code>)和伪元素(如<code>::before</code>)；</li>
<li>类选择器(<code>.example</code>)，属性选择器(<code>[type=&quot;radio&quot;]</code>)和伪类(<code>:hover</code>)</li>
<li>ID选择器(<code>#example</code>)</li>
</ol>
<ul>
<li><p><strong>通配选择符</strong>（universal selector）（<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Universal_selectors"><code>*</code></a>）<strong>关系选择符</strong>（combinators）（<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Adjacent_sibling_combinator"><code>+</code></a>, <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Child_combinator"><code>&gt;</code></a>, <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/General_sibling_combinator"><code>~</code></a>, <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator">‘<code>                </code>‘</a>, <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Column_combinator"><code>||</code></a>）和 <strong>否定伪类</strong>（negation pseudo-class）（<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:not"><code>:not()</code></a>）对优先级没有影响。（但是，在 <code>:not()</code> 内部声明的选择器会影响优先级）。</p>
</li>
<li><p>给元素添加的<strong>内联样式</strong> (例如，<code>style=&quot;font-weight:bold&quot;</code>) 总会覆盖外部样式表的任何样式 ，因此可看作是具有最高的优先级。</p>
</li>
</ul>
<h2 id="important例外规则"><a href="#important例外规则" class="headerlink" title="!important例外规则"></a><code>!important</code>例外规则</h2><p>当在一个样式声明中使用一个 <code>!important</code> 规则时，此声明将覆盖任何其他声明。虽然，从技术上讲，<code>!important</code> 与优先级无关，但它与最终的结果直接相关。使用 <code>!important</code> 是一个<strong>坏习惯</strong>，应该尽量避免，因为这破坏了样式表中的固有的级联规则 使得调试找bug变得更加困难了。当两条相互冲突的带有 <code>!important</code> 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。</p>
<ul>
<li><strong>一定</strong>要优先考虑使用样式规则的优先级来解决问题而不是 <code>!important</code></li>
<li><strong>只有</strong>在需要覆盖全站或外部 CSS 的特定页面中使用 <code>!important</code></li>
<li><strong>永远不要</strong>在你的插件中使用 <code>!important</code></li>
<li><strong>永远不要</strong>在全站范围的 CSS 代码中使用 <code>!important</code></li>
</ul>
<h3 id="什么时候应该用-important"><a href="#什么时候应该用-important" class="headerlink" title="什么时候应该用!important"></a>什么时候应该用<code>!important</code></h3><ol>
<li>覆盖内联样式<ol>
<li>内联样式和!important都被认为是非常不好的做法，但是有时你可以在CSS文件里用!important去覆盖内联样式。</li>
<li>许多JavaScript框架和库都添加了内联样式。 有时候可以用<code>!important</code>与优先级高的选择器一起使用，以重写覆盖这些内联样式。</li>
</ol>
</li>
<li>覆盖优先级高的选择器</li>
</ol>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-id">#someElement</span> <span class="selector-tag">p</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: blue;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">p</span><span class="selector-class">.awesome</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: red <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>在外层有 <code>#someElement</code> 的情况下，你怎样能使 <code>awesome </code>的段落变成红色呢？这种情况下，如果不使用 <code>!important</code> ，第一条规则永远比第二条的优先级更高</p>
<h3 id="怎么覆盖-important"><a href="#怎么覆盖-important" class="headerlink" title="怎么覆盖!important"></a>怎么覆盖<code>!important</code></h3><ol>
<li>只需再添加一条 带 <code>!important</code> 的CSS规则，再给这个给选择器更高的优先级（添加一个标签，ID或类）；或是添加一样选择器，把它的位置放在原有声明的后面（总之，最后定义一条规则比胜）。</li>
<li>或者使用相同的选择器，但是置于已有的样式之后</li>
<li>或干脆改写原来的规则，以避免使用 <code>!important</code></li>
</ol>
<h1 id="CSS继承"><a href="#CSS继承" class="headerlink" title="CSS继承"></a>CSS继承</h1><blockquote>
<p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/inheritance">继承 - CSS（层叠样式表） | MDN (mozilla.org)</a></p>
</blockquote>
<p>在css中，每个<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference">CSS 属性定义</a>的概述都指出了这个属性是默认继承的(“Inherited: Yes”) 还是默认不继承的(“Inherited: no”)。这决定了当你没有为元素的属性指定值时该如何计算值。</p>
<h2 id="继承属性"><a href="#继承属性" class="headerlink" title="继承属性"></a>继承属性</h2><p>当元素的一个<strong>继承属性 （inherited property）</strong>没有指定值时，则取父元素的同属性的<a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/CSS/computed_value">计算值 computed value (en-US)</a>。只有文档根元素取该属性的概述中给定的<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/initial_value">初始值</a>（<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/initial_value">initial value</a>）（这里的意思应该是在该属性本身的定义中的默认值）。</p>
<p>继承属性的一个典型例子就是 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/color"><code>color</code></a> 属性。给出以下样式规则：</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">p</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: green;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>This paragraph has <span class="tag">&lt;<span class="name">em</span>&gt;</span>emphasized text<span class="tag">&lt;/<span class="name">em</span>&gt;</span> in it.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>…文本 “emphasized text” 就会呈现为绿色，因为 <code>em</code> 元素继承了 <code>p</code> 元素 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/color"><code>color</code></a> 属性的值，而没有获取 <code>color</code> 属性的初始值（这个 <code>color</code> 值用于页面没有指定 <code>color</code> 时的根元素）。</p>
<p><img src= "/img/loading.gif" data-lazy-src="https://jzhmcoo1-1258918430.cos.ap-shanghai.myqcloud.com/markdown/20210626143346-%E7%BB%A7%E6%89%BF%E5%B1%9E%E6%80%A7.png" alt="继承属性color"></p>
<h2 id="非继承属性"><a href="#非继承属性" class="headerlink" title="非继承属性"></a>非继承属性</h2><p>当元素的一个<strong>非继承属性</strong>(在Mozilla code 里有时称之为<strong>reset property</strong> )没有指定值时，则取属性的<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/initial_value">初始值 initial value</a>（该值在该属性的概述里被指定）。</p>
<p>非继承属性的一个典型例子就是 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/border"><code>border</code></a> 属性。给出以下样式规则：</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">p</span> &#123; <span class="attribute">border</span>: medium solid; &#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>This paragraph has <span class="tag">&lt;<span class="name">em</span>&gt;</span>emphasized text<span class="tag">&lt;/<span class="name">em</span>&gt;</span> in it.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><img src= "/img/loading.gif" data-lazy-src="https://jzhmcoo1-1258918430.cos.ap-shanghai.myqcloud.com/markdown/20210626143508-border-%E9%9D%9E%E7%BB%A7%E6%89%BF.png" alt="border非继承"></p>
<p>…文本 “emphasized text” 就没有边框，因为 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-style"><code>border-style</code></a> 属性的初始值为<code>none</code>。</p>
<p>如果在样式表上对<code>em</code>加上<code>border:inherit</code>，那么也会产生边框：</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">p</span> &#123;</span><br><span class="line">  <span class="attribute">border</span>: medium solid;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">em</span> &#123;</span><br><span class="line">  <span class="attribute">border</span>: inherit;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><img src= "/img/loading.gif" data-lazy-src="https://jzhmcoo1-1258918430.cos.ap-shanghai.myqcloud.com/markdown/20210626143257-border-inherit.png" alt="border设置为inherit"></p>
<p> <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/inherit"><code>inherit</code></a> 关键字允许显式的声明继承性，它对继承和非继承属性都生效。</p>
<p>可以使用 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/all"><code>all</code></a> 简写属性一次控制所有属性的继承，该属性将其值应用于所有属性，例如:</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">p</span> &#123;</span><br><span class="line">  <span class="attribute">border</span>: medium solid;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">em</span> &#123;</span><br><span class="line">  all: inherit;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><img src= "/img/loading.gif" data-lazy-src="https://jzhmcoo1-1258918430.cos.ap-shanghai.myqcloud.com/markdown/20210626143125-all-inherit.png" alt="all属性设置为Inherit"></p>
<p>此时让<code>em</code>继承<code>p</code>的所有属性</p>
<h2 id="控制继承的关键字"><a href="#控制继承的关键字" class="headerlink" title="控制继承的关键字"></a>控制继承的关键字</h2><ul>
<li><p><code>inherit</code>:继承，使元素的属性与其父元素相同</p>
</li>
<li><p><code>initial</code>:初始，将属性设置为其初始值(什么是初始值？比如<code>color</code>属性，在没有设置的时候，他的默认值为黑色的)</p>
</li>
<li><p><code>unset</code>:未设置，如果继承，则将属性设置为其继承的值，否则将其设置为初始值</p>
</li>
<li><p><code>revert</code>:还原，将属性重置为由用户代理样式表（或用户样式，如果存在）建立的值</p>
</li>
<li><p><code>all</code>:all属性，允许一次将所有属性重置为其初始、继承、还原或未设置状态</p>
</li>
</ul>
<img src= "/img/loading.gif" data-lazy-src="https://jzhmcoo1-1258918430.cos.ap-shanghai.myqcloud.com/markdown/image-20210626160153770.png" alt="image-20210626160153770" style="zoom: 67%;" />

<h3 id="举例1-initial重置某属性为其默认值"><a href="#举例1-initial重置某属性为其默认值" class="headerlink" title="举例1 initial重置某属性为其默认值"></a>举例1 <code>initial</code>重置某属性为其默认值</h3><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>百度<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>当我们什么都没设置的时候，显示为蓝色带下划线的</p>
<p><img src= "/img/loading.gif" data-lazy-src="https://jzhmcoo1-1258918430.cos.ap-shanghai.myqcloud.com/markdown/image-20210626154840548.png" alt="image-20210626154840548"></p>
<p>这是因为我们自己的代码没有设置对应的规则，而是浏览器的用户代理样式表替我们设置的。</p>
<p>如果我们设置</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">a</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: initial;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><img src= "/img/loading.gif" data-lazy-src="https://jzhmcoo1-1258918430.cos.ap-shanghai.myqcloud.com/markdown/image-20210626155146116.png" alt="image-20210626155146116"></p>
<p>可以看到原本用户代理样式给我们设置的链接颜色<code>color</code>属性，变成了黑色。因为<code>color</code>这个属性的<strong>初始值</strong>就被规定为<code>#000</code>，也就是<code>color</code>属性的默认值的意思。</p>
<h3 id="举例2-inherit继承父元素属性"><a href="#举例2-inherit继承父元素属性" class="headerlink" title="举例2 inherit继承父元素属性"></a>举例2 <code>inherit</code>继承父元素属性</h3><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">span</span>&gt;</span>This text is red.<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">em</span>&gt;</span>This text is in the initial color (typically black).<span class="tag">&lt;/<span class="name">em</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">span</span>&gt;</span>This is red again.<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">p</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: red;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><img src= "/img/loading.gif" data-lazy-src="https://jzhmcoo1-1258918430.cos.ap-shanghai.myqcloud.com/markdown/image-20210626160710724.png" alt="image-20210626160710724"></p>
<p>由于<code>color</code>属性本来就是默认继承的，所以我们不设置<code>em</code>属性的<code>color</code>，其<code>color</code>也会和父元素保持一致</p>
<p>如果<code>color</code>属性设置为<code>initial</code>，<code>color</code>会成为<code>#000</code>，这个我们在举例1中就说明了</p>
<p>我们再给<code>p</code>元素添加一个<code>border</code></p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">p</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: red;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#000</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>由于<code>border</code>不是继承属性，所以<code>em</code>元素不会拥有<code>border</code>属性</p>
<p><img src= "/img/loading.gif" data-lazy-src="https://jzhmcoo1-1258918430.cos.ap-shanghai.myqcloud.com/markdown/image-20210626160957546.png" alt="image-20210626160957546"></p>
<p>但是我们如果显式声明</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">p</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: red;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#000</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">em</span> &#123;</span><br><span class="line">  <span class="attribute">border</span>: inherit;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><img src= "/img/loading.gif" data-lazy-src="https://jzhmcoo1-1258918430.cos.ap-shanghai.myqcloud.com/markdown/image-20210626161046424.png" alt="image-20210626161046424"></p>
<p>那么就会发现<code>em</code>元素也有<code>border</code>属性了</p>
<h3 id="举例3-unset设置继承属性"><a href="#举例3-unset设置继承属性" class="headerlink" title="举例3 unset设置继承属性"></a>举例3 <code>unset</code>设置继承属性</h3><p>还是用<code>color</code>和<code>border</code>来举例</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.foo</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: blue;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.bar</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: green;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">p</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: red;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.bar</span> <span class="selector-tag">p</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: unset;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>This text is red.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;foo&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>This text is also red.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;bar&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>This text is green (default inherited value).<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><img src= "/img/loading.gif" data-lazy-src="https://jzhmcoo1-1258918430.cos.ap-shanghai.myqcloud.com/markdown/image-20210626162700958.png" alt="image-20210626162700958"></p>
<p>分析：</p>
<ul>
<li><p>第一行<code>p</code>显示为红色没有问题，因为css显示声明了p的color为red</p>
</li>
<li><p>第二行<code>.foo</code>中的<code>p</code>也是红色，foo不是设置了color为blue吗？color不是继承属性吗？但是因为这里明确设置了p标签的颜色，所以color即使继承也被覆盖了</p>
<p>如果我们把<code>p</code>改成<code>color:unset</code>，那么就会变成</p>
<p><img src= "/img/loading.gif" data-lazy-src="https://jzhmcoo1-1258918430.cos.ap-shanghai.myqcloud.com/markdown/image-20210626163019622.png" alt="image-20210626163019622"></p>
</li>
<li><p>第三行是绿色的，因为<code>color</code>继承了<code>.bar</code>的<code>color</code>，样式规则显示声明了<code>bar</code>中的<code>p</code>的<code>color</code>为<code>unset</code>，也就是<code>inherit</code></p>
</li>
</ul>
<h3 id="举例4-unset设置非继承属性"><a href="#举例4-unset设置非继承属性" class="headerlink" title="举例4 unset设置非继承属性"></a>举例4 <code>unset</code>设置非继承属性</h3><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>This text has a red border.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>This text has a red border.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;bar&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>This text has has a black border (initial default, not inherited).<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid green;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">p</span> &#123;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid red;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.bar</span> <span class="selector-tag">p</span> &#123;</span><br><span class="line">  <span class="attribute">border-color</span>: unset;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><img src= "/img/loading.gif" data-lazy-src="https://jzhmcoo1-1258918430.cos.ap-shanghai.myqcloud.com/markdown/image-20210626164543789.png" alt="image-20210626164543789"></p>
<p>这里把<code>border-color</code>属性设置为<code>unset</code>，<code>border-color</code>本身是非继承属性，所以设置为<code>unset</code>，相当于设置为<code>initial</code>，也就是<code>border-color</code>的初始值<code>#000</code></p>
<h1 id="CSS层叠"><a href="#CSS层叠" class="headerlink" title="CSS层叠"></a>CSS层叠</h1><blockquote>
<p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Cascade">CSS层叠 - CSS（层叠样式表） | MDN (mozilla.org)</a></p>
</blockquote>
<blockquote>
<p>层叠是CSS的一个基本特征，它是一个定义了如何<strong>合并来自多个源的属性值</strong>的算法。它在CSS处于核心地位，CSS的全称层叠样式表正是强调了这一点。</p>
</blockquote>
<h2 id="哪些CSS实体参与层叠计算"><a href="#哪些CSS实体参与层叠计算" class="headerlink" title="哪些CSS实体参与层叠计算"></a>哪些CSS实体参与层叠计算</h2><p>只有CSS声明，就是属性名值对，会参与层叠计算。这表示包含CSS声明以外实体的@规则不参与层叠计算，比如包含描述符（descriptors）的<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/@font-face"><code>@font-face</code></a>。对于这些情形，@规则是做为一个整体参与层叠计算，比如@font-face的层叠是由其描述符<code>font-family</code>确定的。如果对同一个描述符定义了多次 @font-face，则最适合的 @font-face是做为一个整体而被考虑的。</p>
<p>包含在大多数@规则的CSS声明是参与层叠计算的，比如包含于<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media"><code>@media</code></a>、<code>@documents</code>或者<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/@supports"><code>@supports</code></a>的CSS声明，但是包含于<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/@keyframes"><code>@keyframes</code></a>的声明不参与计算，正如<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/@font-face"><code>@font-face</code></a>，它是作为一个整体参与层叠算法的筛选。</p>
<p>最后，注意 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/@import"><code>@import</code></a>和<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/@charset"><code>@charset</code></a>遵循特定的算法，并且不受层叠算法影响。</p>
<h2 id="CSS声明源"><a href="#CSS声明源" class="headerlink" title="CSS声明源"></a>CSS声明源</h2><p>CSS层叠算法期望通过挑选CSS声明来给CSS属性设置正确的值。CSS声明可以有不同的来源：</p>
<ul>
<li>浏览器会有一个基本的样式表来给任何网页设置默认样式。这些样式统称<strong>用户代理样式</strong>。一些浏览器通过使用真正的样式表，而其他则通过代码模拟，但无论是哪种情形都应是不可被检测的。而且部分浏览器允许用户修改用户代理样式。尽管HTML标准对用户代理样式做了诸多限制，浏览器仍大有可为，具体表现在<strong>不同浏览器间会存在重大的差异</strong>。为了减轻开发成本以及降低样式表运行所需的基本环境，网页开发者通常会使用一个CSS reset样式表，强制将常见的属性值转为确定状态。</li>
<li>网页的作者可以定义文档的样式，<strong>这是最常见的样式表</strong>。大多数情况下此类型样式表会定义多个，它们构成网站的视觉和体验，即主题。</li>
<li>读者，作为浏览器的用户，可以<strong>使用自定义样式表定制使用体验</strong>。</li>
</ul>
<p>尽管CSS样式会来自这些不同的源，但它们的作用范围是重叠的，而层叠算法则定义了它们如何相互作用。</p>
<h2 id="层叠顺序"><a href="#层叠顺序" class="headerlink" title="层叠顺序"></a>层叠顺序</h2><p>层叠算法决定如何找出要应用到每个文档元素的每个属性上的值。</p>
<ol>
<li>它首先过滤来自不同源的全部规则，并保留要应用到指定元素上的那些规则。这意味着这些规则的选择器匹配指定元素，同时也是一个合适的@规则（at-rule）的一部分。</li>
<li>其次，它依据重要性对这些规则进行排序。即是指，规则后面是否跟随者!import以及规则的来源。层叠是按升序排列的，这意味着来着用户自定义样式表的<code>!important</code>值比用户代理样式表的普通值优先级高：</li>
</ol>
<table>
<thead>
<tr>
<th align="center">编号</th>
<th align="center">来源</th>
<th align="center">重要程度</th>
</tr>
</thead>
<tbody><tr>
<td align="center">1</td>
<td align="center">用户代理</td>
<td align="center">普通</td>
</tr>
<tr>
<td align="center">2</td>
<td align="center">用户</td>
<td align="center">普通</td>
</tr>
<tr>
<td align="center">3</td>
<td align="center">页面作者</td>
<td align="center">普通</td>
</tr>
<tr>
<td align="center">4</td>
<td align="center">CSS动画</td>
<td align="center">见下节</td>
</tr>
<tr>
<td align="center">5</td>
<td align="center">页面作者</td>
<td align="center"><code>!important</code></td>
</tr>
<tr>
<td align="center">6</td>
<td align="center">用户</td>
<td align="center"><code>!important</code></td>
</tr>
<tr>
<td align="center">7</td>
<td align="center">用户代理</td>
<td align="center"><code>!important</code></td>
</tr>
<tr>
<td align="center">8</td>
<td align="center">css 过渡(css transitions)</td>
<td align="center"></td>
</tr>
</tbody></table>
<ol start="3">
<li>假如层叠顺序相等，则使用哪个值取决于<a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity">优先级</a>。</li>
</ol>
<h2 id="CSS动画与层叠"><a href="#CSS动画与层叠" class="headerlink" title="CSS动画与层叠"></a>CSS动画与层叠</h2><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS动画</a>，指使用<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/@keyframes"><code>@keyframes</code></a> @规则定义状态间的动画。关键帧不参与层叠，意味着在任何时候CSS都是取单一的@keyframes的值而不会是某几个@keyframe的混合。</p>
<p>当有多个满足条件的关键帧时，在最重要的文档里面最后定义的关键帧会被选中，而不会是将它们组合在一起。</p>
<p>同时仍应注意用@keyframes @规则定义的值会覆盖全部普通值，但会被!important的值覆盖。</p>
<h3 id="例子"><a href="#例子" class="headerlink" title="例子"></a>例子</h3><p>用户代理CSS</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">li</span> &#123; <span class="attribute">margin-left</span>: <span class="number">10px</span> &#125;</span><br></pre></td></tr></table></figure>

<p>网页作者CSS1</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">li</span> &#123; <span class="attribute">margin-left</span>: <span class="number">0</span> &#125; <span class="comment">/* This is a reset */</span></span><br></pre></td></tr></table></figure>

<p>网页作者CSS2</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="keyword">@media</span> screen &#123;</span><br><span class="line">  <span class="selector-tag">li</span> &#123; <span class="attribute">margin-left</span>: <span class="number">3px</span> &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> print &#123;</span><br><span class="line">  <span class="selector-tag">li</span> &#123; <span class="attribute">margin-left</span>: <span class="number">1px</span> &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>用户CSS</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.specific</span> &#123; <span class="attribute">margin-left</span>: <span class="number">1em</span> &#125;</span><br></pre></td></tr></table></figure>

<p>对于这个情形，应当应用<code>li</code>和<code>.specific</code>里面的声明。由于没有声明被标记为!important，所以优先顺序为页面作者样式优于用户样式，用户代理样式最低。</p>
<p>由于是在屏幕显示，所以<code>@media print</code>舍弃，而网页CSS1和网页CSS2的选择器相同，因此优先级也相同，故最终选择的是后者(网页CSS2)</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="attribute">margin-left</span>: <span class="number">3px</span></span><br></pre></td></tr></table></figure>

<p>注意：尽管定义在用户CSS里面的声明有更高的优先级，但它并不会被选中，因为<strong>层叠算法是先于优先级算法</strong>的。(层叠优先级相同时看优先级)</p>
<h1 id="CSS盒模型"><a href="#CSS盒模型" class="headerlink" title="CSS盒模型"></a>CSS盒模型</h1><blockquote>
<p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS 基础框盒模型介绍 - CSS（层叠样式表） | MDN (mozilla.org)</a></p>
</blockquote>
<p>当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的 <strong>CSS 基础框盒模型</strong>（<strong>CSS basic box model</strong>），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）</p>
<p>每个盒子由四个部分（或称<em>区域</em>）组成，其效用由它们各自的边界（Edge）所定义（原文：defined by their respective edges，可能意指容纳、包含、限制等）。如图，与盒子的四个组成区域相对应，每个盒子有四个边界：<em>内容边界</em> <em>Content edge</em>、<em>内边距边界</em> <em>Padding Edge</em>、<em>边框边界</em> <em>Border Edge</em>、<em>外边框边界</em> <em>Margin Edge</em>。</p>
<img src= "/img/loading.gif" data-lazy-src="https://jzhmcoo1-1258918430.cos.ap-shanghai.myqcloud.com/markdown/20210626210544-box-model.png" alt="box-model" style="zoom:150%;" />

<ul>
<li><strong>内容区域 content area</strong> ，由内容边界限制，容纳着元素的“真实”内容，例如文本、图像，或是一个视频播放器。它的尺寸为内容宽度（或称 <em>content-box 宽度</em>）和内容高度（或称 <em>content-box 高度</em>）。它通常含有一个背景颜色（默认颜色为透明）或背景图像。<ul>
<li>如果 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing"><code>box-sizing</code></a> 为 <code>content-box</code>（默认），则内容区域的大小可明确地通过 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/width"><code>width</code></a>、<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/min-width"><code>min-width</code></a>、<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/max-width"><code>max-width</code></a>、<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/height"><code>height</code></a>、<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/min-height"><code>min-height</code></a>，和 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/max-height"><code>max-height</code></a> 控制。</li>
</ul>
</li>
<li><strong>内边距区域 padding area</strong> 由内边距边界限制，扩展自内容区域，负责延伸内容区域的背景，填充元素中内容与边框的间距。它的尺寸是 <em>padding-box 宽度</em> 和 <em>padding-box 高度</em>。<ul>
<li>内边距的粗细可以由 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/padding-top"><code>padding-top</code></a>、<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/padding-right"><code>padding-right</code></a>、<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/padding-bottom"><code>padding-bottom</code></a>、<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/padding-left"><code>padding-left</code></a>，和简写属性 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/padding"><code>padding</code></a> 控制。</li>
</ul>
</li>
<li><strong>边框区域 border area</strong> 由边框边界限制，扩展自内边距区域，是容纳边框的区域。其尺寸为 <em>border-box 宽度</em> 和 <em>border-box 高度</em>。<ul>
<li>边框的粗细由 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-width"><code>border-width</code></a> 和简写的 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/border"><code>border</code></a> 属性控制。如果 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing"><code>box-sizing</code></a> 属性被设为 <code>border-box</code>，那么边框区域的大小可明确地通过 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/width"><code>width</code></a>、<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/min-width"><code>min-width</code></a>, <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/max-width"><code>max-width</code></a>、<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/height"><code>height</code></a>、<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/min-height"><code>min-height</code></a>，和 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/max-height"><code>max-height</code></a> 属性控制。假如框盒上设有背景（<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-color"><code>background-color</code></a> 或 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-image"><code>background-image</code></a>），背景将会一直延伸至边框的外沿（默认为在边框下层延伸，边框会盖在背景上）。此默认表现可通过 CSS 属性 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-clip"><code>background-clip</code></a> 来改变。</li>
</ul>
</li>
<li><strong>外边距区域 margin area</strong> 由外边距边界限制，用空白区域扩展边框区域，以分开相邻的元素。它的尺寸为 <em>margin-box 宽度</em> 和 <em>margin-box 高度</em>。<ul>
<li>外边距区域的大小由 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin-top"><code>margin-top</code></a>、<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin-right"><code>margin-right</code></a>、<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin-bottom"><code>margin-bottom</code></a>、<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin-left"><code>margin-left</code></a>，和简写属性 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin"><code>margin</code></a> 控制。在发生<a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/CSS/margin_collapsing">外边距合并</a>的情况下，由于盒之间共享外边距，外边距不容易弄清楚。</li>
</ul>
</li>
<li>最后，请注意，除<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Replaced_element">可替换元素</a>外，对于行内元素来说，尽管内容周围存在内边距与边框，但其占用空间（每一行文字的高度）则由 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/line-height"><code>line-height</code></a> 属性决定，即使边框和内边距仍会显示在内容周围。</li>
</ul>
<h1 id="外边距重叠-塌陷"><a href="#外边距重叠-塌陷" class="headerlink" title="外边距重叠(塌陷)"></a>外边距重叠(塌陷)</h1><blockquote>
<p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">外边距重叠 - CSS（层叠样式表） | MDN (mozilla.org)</a></p>
</blockquote>
<p>块的<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin-top">上外边距(margin-top)</a>和<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin-bottom">下外边距(margin-bottom)</a>有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为<strong>边距折叠</strong>。</p>
<blockquote>
<p>注意：有设定<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/float">float</a>和<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/position#absolute">position=absolute</a>的元素不会产生外边距重叠行为。</p>
</blockquote>
<h2 id="三种情况会发生外边距重叠"><a href="#三种情况会发生外边距重叠" class="headerlink" title="三种情况会发生外边距重叠"></a>三种情况会发生外边距重叠</h2><h3 id="同一层相邻元素之间"><a href="#同一层相邻元素之间" class="headerlink" title="同一层相邻元素之间"></a>同一层相邻元素之间</h3><p>相邻的两个元素之间的外边距重叠，除非后一个元素加上<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/clear">clear-fix清除浮动</a>。</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>下边界范围会...<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>...会跟这个元素的上边界范围重叠。<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">p</span><span class="selector-pseudo">:nth-child</span>(<span class="number">1</span>) &#123;</span><br><span class="line">  <span class="attribute">margin-bottom</span>: <span class="number">13px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">p</span><span class="selector-pseudo">:nth-child</span>(<span class="number">2</span>) &#123;</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">87px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><img src= "/img/loading.gif" data-lazy-src="https://jzhmcoo1-1258918430.cos.ap-shanghai.myqcloud.com/markdown/20210626213402-margin-collapse.png" alt="外边距塌陷-1"></p>
<p><img src= "/img/loading.gif" data-lazy-src="https://jzhmcoo1-1258918430.cos.ap-shanghai.myqcloud.com/markdown/image-20210626213834531.png" alt="image-20210626213834531"></p>
<p>如图展示的下面这个p盒子的盒模型图，可以看到上外边距为<code>87px</code>，和<code>13px</code>合并了。</p>
<blockquote>
<p>这个例子如果以为边界会合并的话，理所当然会猜测上下2个元素会合并一个100px的边界范围，但其实会发生边界折叠，只会挑选最大边界范围留下，所以这个例子的边界范围其实是87px。</p>
</blockquote>
<h3 id="没有内容将父元素和后代元素分开"><a href="#没有内容将父元素和后代元素分开" class="headerlink" title="没有内容将父元素和后代元素分开"></a>没有内容将父元素和后代元素分开</h3><ul>
<li>如果没有边框<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/border"><code>border</code></a>，内边距<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/padding"><code>padding</code></a>，行内内容，也没有创建<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context">块级格式上下文</a>或<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/clear">清除浮动</a>来分开一个块级元素的上边界<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin-top"><code>margin-top</code></a> 与其内一个或多个后代块级元素的上边界<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin-top"><code>margin-top</code></a>；</li>
<li>或没有边框，内边距，行内内容，高度<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/height"><code>height</code></a>，最小高度<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/min-height"><code>min-height</code></a>或 最大高度<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/max-height"><code>max-height</code></a> 来分开一个块级元素的下边界<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin-bottom"><code>margin-bottom</code></a>与其内的一个或多个后代后代块元素的下边界<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin-bottom"><code>margin-bottom</code></a>，</li>
<li>则就会出现<strong>父块元素和其内后代块元素外边界重叠</strong>，<strong>重叠部分最终会溢出到父级块元素外面</strong>。</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">section</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">header</span>&gt;</span>上边界重叠 87<span class="tag">&lt;/<span class="name">header</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">main</span>&gt;</span><span class="tag">&lt;/<span class="name">main</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">footer</span>&gt;</span>下边界重叠 87 不能再高了<span class="tag">&lt;/<span class="name">footer</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">section</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">section</span> &#123;</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">13px</span>;</span><br><span class="line">  <span class="attribute">margin-bottom</span>: <span class="number">87px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">header</span> &#123;</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">87px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">footer</span> &#123;</span><br><span class="line">  <span class="attribute">margin-bottom</span>: <span class="number">13px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><img src= "/img/loading.gif" data-lazy-src="https://jzhmcoo1-1258918430.cos.ap-shanghai.myqcloud.com/markdown/image-20210626222038955.png" alt="image-20210626222038955"></p>
<p><img src= "/img/loading.gif" data-lazy-src="https://jzhmcoo1-1258918430.cos.ap-shanghai.myqcloud.com/markdown/image-20210626222215751.png" alt="image-20210626222215751"></p>
<p>可以看到<code>header</code>的<code>margin-top</code>溢出到父元素外面，和父元素的<code>margin-top</code>合并了</p>
<p><img src= "/img/loading.gif" data-lazy-src="https://jzhmcoo1-1258918430.cos.ap-shanghai.myqcloud.com/markdown/image-20210626222738126.png" alt="image-20210626222738126"></p>
<h3 id="空的块级元素"><a href="#空的块级元素" class="headerlink" title="空的块级元素"></a>空的块级元素</h3><p>当一个块元素上边界<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin-top"><code>margin-top</code></a> 直接贴到元素下边界<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin-bottom"><code>margin-bottom</code></a>时也会发生边界折叠。这种情况会发生在一个块元素完全没有设定边框<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/border"><code>border</code></a>、内边距<code>paddng</code>、高度<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/height"><code>height</code></a>、最小高度<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/min-height"><code>min-height</code></a> 、最大高度<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/max-height"><code>max-height</code></a> 、内容设定为inline或是加上<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/clear">clear-fix</a>的时候。</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>上边界范围是 87 ...<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>... 上边界范围是 87<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">p</span> &#123;</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">13px</span>;</span><br><span class="line">  <span class="attribute">margin-bottom</span>: <span class="number">87px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><img src= "/img/loading.gif" data-lazy-src="https://jzhmcoo1-1258918430.cos.ap-shanghai.myqcloud.com/markdown/image-20210626230919191.png" alt="image-20210626230919191"></p>
<p>可以看到空<code>div</code>的边距与下面的<code>p</code>标签发生了外边距塌陷</p>
<h2 id="一些需要注意的地方"><a href="#一些需要注意的地方" class="headerlink" title="一些需要注意的地方"></a>一些需要注意的地方</h2><ul>
<li>上述情况的组合会产生更复杂的外边距折叠。</li>
<li>即使某一外边距为0，这些规则仍然适用。因此就算父元素的外边距是0，第一个或最后一个子元素的外边距仍然会“溢出”到父元素的外面。</li>
<li>如果参与折叠的外边距中包含负值，折叠后的外边距的值为最大的正边距与最小的负边距（即绝对值最大的负边距）的和,；也就是说如果有-13px 8px 100px叠在一起，边界范围的技术就是 100px -13px的87px。</li>
<li>如果所有参与折叠的外边距都为负，折叠后的外边距的值为最小的负边距的值。这一规则适用于相邻元素和嵌套元素。</li>
</ul>
<p>以上这些内容都是发生在Block-Level的元素，设定floating和absolutely positioned的元素完全不用担心边界重叠的问题。</p>
<h1 id="布局和包含块"><a href="#布局和包含块" class="headerlink" title="布局和包含块"></a>布局和包含块</h1><blockquote>
<p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Containing_block">布局和包含块 - CSS（层叠样式表） | MDN (mozilla.org)</a></p>
</blockquote>
<p>一个元素的尺寸和位置经常受其**包含块(containing block)**的影响。大多数情况下，包含块就是这个元素最近的祖先<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Block-level_elements">块元素</a>的<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#content-area">内容区</a>，但也不是总是这样。在本文中，我们来过一遍确定包含块的所有因素。</p>
<p>当一个客户端代理（比如说浏览器）展示一个文档的时候，对于每一个元素，它都产生了一个盒子。每一个盒子都被划分为四个区域：</p>
<ol>
<li>内容区</li>
<li>内边距区</li>
<li>边框区</li>
<li>外边距区</li>
</ol>
<h2 id="包含块的影响"><a href="#包含块的影响" class="headerlink" title="包含块的影响"></a>包含块的影响</h2><p>元素的尺寸及位置，常常会受它的包含块所影响。对于一些属性，例如 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/width"><code>width</code></a>, <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/height"><code>height</code></a>, <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/padding"><code>padding</code></a>, <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin"><code>margin</code></a>，绝对定位元素的偏移值 （比如 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/position"><code>position</code></a> 被设置为 <code>absolute</code> 或 <code>fixed</code>），当我们对其赋予百分比值时，这些值的计算值，就是通过元素的包含块计算得来。</p>
<h2 id="确定包含块"><a href="#确定包含块" class="headerlink" title="确定包含块"></a>确定包含块</h2><p>确定一个元素的包含块的过程完全依赖于这个元素的 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/position"><code>position</code></a> 属性：</p>
<ol>
<li>如果 position 属性为 <code>static</code> 、 <code>relative</code> <strong>或 <code>sticky</code><strong>，包含块可能由它的最近的祖先</strong>块元素</strong>（比如说inline-block, block 或 list-item元素）的内容区的边缘组成，也可能会建立格式化上下文(比如说 a table container, flex container, grid container, 或者是 the block container 自身)。</li>
<li>如果 position 属性为 <code>absolute</code> ，包含块就是由它的最近的 position 的值不是 <code>static</code> （也就是值为<code>fixed</code>, <code>absolute</code>, <code>relative</code> 或 <code>sticky</code>）的祖先元素的内边距区的边缘组成。</li>
<li>如果 position 属性是 **<code>fixed</code>**，在连续媒体的情况下(continuous media)包含块是 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Glossary/Viewport">viewport</a> ,在分页媒体(paged media)下的情况下包含块是分页区域(page area)。</li>
<li>如果 position 属性是<code>absolute</code>或<code>fixed</code>，包含块也可能是由满足以下条件的最近父级元素的内边距区的边缘组成的：<ol>
<li> <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform"><code>transform</code></a> 或 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/perspective"><code>perspective</code></a> 的值不是 <code>none</code></li>
<li> <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/will-change"><code>will-change</code></a> 的值是 <code>transform</code> 或 <code>perspective</code></li>
<li> <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter"><code>filter</code></a> 的值不是 <code>none</code> 或 <code>will-change</code> 的值是 <code>filter</code>(只在 Firefox 下生效).</li>
<li> <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/contain"><code>contain</code></a> 的值是 <code>paint</code> (例如: <code>contain: paint;</code>)</li>
</ol>
</li>
</ol>
<blockquote>
<p><strong>注意:</strong> 根元素(<code>&lt;html&gt;</code>)所在的包含块是一个被称为<strong>初始包含块</strong>的矩形。他的尺寸是视口 viewport (for continuous media) 或分页媒体 page media (for paged media).</p>
</blockquote>
<h2 id="根据包含块计算百分值"><a href="#根据包含块计算百分值" class="headerlink" title="根据包含块计算百分值"></a>根据包含块计算百分值</h2><p>如上所述，如果某些属性被赋予一个百分值的话，它的计算值是由这个元素的包含块计算而来的。这些属性包括盒模型属性和偏移属性：</p>
<ol>
<li>要计算 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/height"><code>height</code></a> <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/top"><code>top</code></a> 及 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/bottom"><code>bottom</code></a> 中的百分值，是通过包含块的 <code>height</code> 的值。如果包含块的 <code>height</code> 值会根据它的内容变化，而且包含块的 <code>position</code> 属性的值被赋予 <code>relative</code> 或 <code>static</code> ，那么，这些值的计算值为 auto。</li>
<li>要计算 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/width"><code>width</code></a>, <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/left"><code>left</code></a>, <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/right"><code>right</code></a>, <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/padding"><code>padding</code></a>, <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin"><code>margin</code></a> 这些属性由包含块的 <code>width</code> 属性的值来计算它的百分值。</li>
</ol>
<h3 id="示例1"><a href="#示例1" class="headerlink" title="示例1"></a>示例1</h3><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">section</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>This is a paragraph!<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">section</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: beige;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">section</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: block;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">400px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">160px</span>;</span><br><span class="line">  <span class="attribute">background</span>: lightgray;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">p</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">50%</span>; <span class="comment">/* == 400px * .5 = 200px */</span></span><br><span class="line">  <span class="attribute">height</span>: <span class="number">25%</span>; <span class="comment">/* == 160px * .25 = 40px */</span></span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">5%</span>; <span class="comment">/* == 400px * .05 = 20px */</span></span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">5%</span>; <span class="comment">/* == 400px * .05 = 20px */</span></span><br><span class="line">  <span class="attribute">background</span>: cyan;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>这个示例中，P 标签设置为静态定位，所以它的包含块为 <code>&lt;section&gt;</code> ，因为距离最近的父节点即是她的包含块。</p>
<p><img src= "/img/loading.gif" data-lazy-src="https://jzhmcoo1-1258918430.cos.ap-shanghai.myqcloud.com/markdown/image-20210627120158573.png" alt="image-20210627120158573"></p>
<p>未完待续。。。</p>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="mailto:undefined">lixing</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://www.lihangzhu.com/2021/06/26/Css-Core-Concepts/">https://www.lihangzhu.com/2021/06/26/Css-Core-Concepts/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://www.lihangzhu.com" target="_blank">jzhmcoo1</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E5%89%8D%E7%AB%AF/">前端</a><a class="post-meta__tags" href="/tags/css/">css</a></div><div class="post_share"><div class="social-share" data-image="https://gitee.com/jzhmcoo1/jzhmcoo1picrepo/raw/master/img/css.png" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share.js/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/social-share.js/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/2021/08/01/%E8%B7%A8%E5%9F%9F/"><img class="prev-cover" data-lazy-src="https://jzhmcoo1-1258918430.cos.ap-shanghai.myqcloud.com/markdown/20210801204426-browser.png" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">跨域问题</div></div></a></div><div class="next-post pull-right"><a href="/2021/06/21/Cpp-OJ-Environment/"><img class="next-cover" data-lazy-src="https://jzhmcoo1-1258918430.cos.ap-shanghai.myqcloud.com/markdown/20210621082947.png" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">C++OJ环境搭建</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span> 相关推荐</span></div><div class="relatedPosts-list"><div><a href="/2021/02/23/Webpack打包css/" title="Webpack打包CSS"><img class="cover" data-lazy-src="https://gitee.com/jzhmcoo1/jzhmcoo1picrepo/raw/master/img/webpack-logo2.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-02-23</div><div class="title">Webpack打包CSS</div></div></a></div><div><a href="/2021/02/06/Webpack打包ts/" title="Webpack打包TypeScript"><img class="cover" data-lazy-src="https://gitee.com/jzhmcoo1/jzhmcoo1picrepo/raw/master/img/webpack-logo2.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-02-06</div><div class="title">Webpack打包TypeScript</div></div></a></div><div><a href="/2021/08/01/跨域/" title="跨域问题"><img class="cover" data-lazy-src="https://jzhmcoo1-1258918430.cos.ap-shanghai.myqcloud.com/markdown/20210801204426-browser.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-08-01</div><div class="title">跨域问题</div></div></a></div></div></div><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div class="vcomment" id="vcomment"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="card-info-avatar is-center"><img class="avatar-img" data-lazy-src="https://jzhmcoo1-1258918430.cos.ap-shanghai.myqcloud.com/markdown/avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/><div class="author-info__name">lixing</div><div class="author-info__description">👨🏻‍💻 好好学习，天天敲代码 👩🏻‍💻</div></div><div class="card-info-data"><div class="card-info-data-item is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">36</div></a></div><div class="card-info-data-item is-center"><a href="/tags/"><div class="headline">标签</div><div class="length-num">37</div></a></div><div class="card-info-data-item is-center"><a href="/categories/"><div class="headline">分类</div><div class="length-num">9</div></a></div></div><a class="button--animated" id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/jzhmcoo1"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/jzhmcoo1" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="mailto:jzhmzlxocoo1@gmail.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a><a class="social-icon" href="/atom.xml" target="_blank" title="RSS"><i class="fa fa-rss"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn card-announcement-animation"></i><span>公告</span></div><div class="announcement_content">真正的大师,永远都怀着一颗学徒的心</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E9%93%BE%E6%8E%A5"><span class="toc-number">1.</span> <span class="toc-text">参考链接</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#CSS%E5%85%B3%E9%94%AE%E6%A6%82%E5%BF%B5%E6%80%BB%E8%A7%88"><span class="toc-number">2.</span> <span class="toc-text">CSS关键概念总览</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#CSS%E4%BC%98%E5%85%88%E7%BA%A7"><span class="toc-number">3.</span> <span class="toc-text">CSS优先级</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BC%98%E5%85%88%E7%BA%A7%E5%A6%82%E4%BD%95%E8%AE%A1%E7%AE%97"><span class="toc-number">3.1.</span> <span class="toc-text">优先级如何计算</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%80%89%E6%8B%A9%E5%99%A8%E7%B1%BB%E5%9E%8B"><span class="toc-number">3.2.</span> <span class="toc-text">选择器类型</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#important%E4%BE%8B%E5%A4%96%E8%A7%84%E5%88%99"><span class="toc-number">3.3.</span> <span class="toc-text">!important例外规则</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%97%B6%E5%80%99%E5%BA%94%E8%AF%A5%E7%94%A8-important"><span class="toc-number">3.3.1.</span> <span class="toc-text">什么时候应该用!important</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%80%8E%E4%B9%88%E8%A6%86%E7%9B%96-important"><span class="toc-number">3.3.2.</span> <span class="toc-text">怎么覆盖!important</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#CSS%E7%BB%A7%E6%89%BF"><span class="toc-number">4.</span> <span class="toc-text">CSS继承</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BB%A7%E6%89%BF%E5%B1%9E%E6%80%A7"><span class="toc-number">4.1.</span> <span class="toc-text">继承属性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%9D%9E%E7%BB%A7%E6%89%BF%E5%B1%9E%E6%80%A7"><span class="toc-number">4.2.</span> <span class="toc-text">非继承属性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%8E%A7%E5%88%B6%E7%BB%A7%E6%89%BF%E7%9A%84%E5%85%B3%E9%94%AE%E5%AD%97"><span class="toc-number">4.3.</span> <span class="toc-text">控制继承的关键字</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%BE%E4%BE%8B1-initial%E9%87%8D%E7%BD%AE%E6%9F%90%E5%B1%9E%E6%80%A7%E4%B8%BA%E5%85%B6%E9%BB%98%E8%AE%A4%E5%80%BC"><span class="toc-number">4.3.1.</span> <span class="toc-text">举例1 initial重置某属性为其默认值</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%BE%E4%BE%8B2-inherit%E7%BB%A7%E6%89%BF%E7%88%B6%E5%85%83%E7%B4%A0%E5%B1%9E%E6%80%A7"><span class="toc-number">4.3.2.</span> <span class="toc-text">举例2 inherit继承父元素属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%BE%E4%BE%8B3-unset%E8%AE%BE%E7%BD%AE%E7%BB%A7%E6%89%BF%E5%B1%9E%E6%80%A7"><span class="toc-number">4.3.3.</span> <span class="toc-text">举例3 unset设置继承属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%BE%E4%BE%8B4-unset%E8%AE%BE%E7%BD%AE%E9%9D%9E%E7%BB%A7%E6%89%BF%E5%B1%9E%E6%80%A7"><span class="toc-number">4.3.4.</span> <span class="toc-text">举例4 unset设置非继承属性</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#CSS%E5%B1%82%E5%8F%A0"><span class="toc-number">5.</span> <span class="toc-text">CSS层叠</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%93%AA%E4%BA%9BCSS%E5%AE%9E%E4%BD%93%E5%8F%82%E4%B8%8E%E5%B1%82%E5%8F%A0%E8%AE%A1%E7%AE%97"><span class="toc-number">5.1.</span> <span class="toc-text">哪些CSS实体参与层叠计算</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#CSS%E5%A3%B0%E6%98%8E%E6%BA%90"><span class="toc-number">5.2.</span> <span class="toc-text">CSS声明源</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B1%82%E5%8F%A0%E9%A1%BA%E5%BA%8F"><span class="toc-number">5.3.</span> <span class="toc-text">层叠顺序</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#CSS%E5%8A%A8%E7%94%BB%E4%B8%8E%E5%B1%82%E5%8F%A0"><span class="toc-number">5.4.</span> <span class="toc-text">CSS动画与层叠</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BE%8B%E5%AD%90"><span class="toc-number">5.4.1.</span> <span class="toc-text">例子</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#CSS%E7%9B%92%E6%A8%A1%E5%9E%8B"><span class="toc-number">6.</span> <span class="toc-text">CSS盒模型</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%A4%96%E8%BE%B9%E8%B7%9D%E9%87%8D%E5%8F%A0-%E5%A1%8C%E9%99%B7"><span class="toc-number">7.</span> <span class="toc-text">外边距重叠(塌陷)</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%89%E7%A7%8D%E6%83%85%E5%86%B5%E4%BC%9A%E5%8F%91%E7%94%9F%E5%A4%96%E8%BE%B9%E8%B7%9D%E9%87%8D%E5%8F%A0"><span class="toc-number">7.1.</span> <span class="toc-text">三种情况会发生外边距重叠</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%90%8C%E4%B8%80%E5%B1%82%E7%9B%B8%E9%82%BB%E5%85%83%E7%B4%A0%E4%B9%8B%E9%97%B4"><span class="toc-number">7.1.1.</span> <span class="toc-text">同一层相邻元素之间</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B2%A1%E6%9C%89%E5%86%85%E5%AE%B9%E5%B0%86%E7%88%B6%E5%85%83%E7%B4%A0%E5%92%8C%E5%90%8E%E4%BB%A3%E5%85%83%E7%B4%A0%E5%88%86%E5%BC%80"><span class="toc-number">7.1.2.</span> <span class="toc-text">没有内容将父元素和后代元素分开</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%A9%BA%E7%9A%84%E5%9D%97%E7%BA%A7%E5%85%83%E7%B4%A0"><span class="toc-number">7.1.3.</span> <span class="toc-text">空的块级元素</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%80%E4%BA%9B%E9%9C%80%E8%A6%81%E6%B3%A8%E6%84%8F%E7%9A%84%E5%9C%B0%E6%96%B9"><span class="toc-number">7.2.</span> <span class="toc-text">一些需要注意的地方</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%B8%83%E5%B1%80%E5%92%8C%E5%8C%85%E5%90%AB%E5%9D%97"><span class="toc-number">8.</span> <span class="toc-text">布局和包含块</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8C%85%E5%90%AB%E5%9D%97%E7%9A%84%E5%BD%B1%E5%93%8D"><span class="toc-number">8.1.</span> <span class="toc-text">包含块的影响</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%A1%AE%E5%AE%9A%E5%8C%85%E5%90%AB%E5%9D%97"><span class="toc-number">8.2.</span> <span class="toc-text">确定包含块</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A0%B9%E6%8D%AE%E5%8C%85%E5%90%AB%E5%9D%97%E8%AE%A1%E7%AE%97%E7%99%BE%E5%88%86%E5%80%BC"><span class="toc-number">8.3.</span> <span class="toc-text">根据包含块计算百分值</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%A4%BA%E4%BE%8B1"><span class="toc-number">8.3.1.</span> <span class="toc-text">示例1</span></a></li></ol></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/2021/08/01/%E8%B7%A8%E5%9F%9F/" title="跨域问题"><img data-lazy-src="https://jzhmcoo1-1258918430.cos.ap-shanghai.myqcloud.com/markdown/20210801204426-browser.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="跨域问题"/></a><div class="content"><a class="title" href="/2021/08/01/%E8%B7%A8%E5%9F%9F/" title="跨域问题">跨域问题</a><time datetime="2021-08-01T12:42:27.000Z" title="发表于 2021-08-01 20:42:27">2021-08-01</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/06/26/Css-Core-Concepts/" title="css关键概念"><img data-lazy-src="https://gitee.com/jzhmcoo1/jzhmcoo1picrepo/raw/master/img/css.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="css关键概念"/></a><div class="content"><a class="title" href="/2021/06/26/Css-Core-Concepts/" title="css关键概念">css关键概念</a><time datetime="2021-06-26T02:53:41.000Z" title="发表于 2021-06-26 10:53:41">2021-06-26</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/06/21/Cpp-OJ-Environment/" title="C++OJ环境搭建"><img data-lazy-src="https://jzhmcoo1-1258918430.cos.ap-shanghai.myqcloud.com/markdown/20210621082947.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="C++OJ环境搭建"/></a><div class="content"><a class="title" href="/2021/06/21/Cpp-OJ-Environment/" title="C++OJ环境搭建">C++OJ环境搭建</a><time datetime="2021-06-21T00:28:12.000Z" title="发表于 2021-06-21 08:28:12">2021-06-21</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/06/20/Browser-Cache/" title="浏览器的强缓存和协商缓存"><img data-lazy-src="https://jzhmcoo1-1258918430.cos.ap-shanghai.myqcloud.com/markdown/20210620222035.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="浏览器的强缓存和协商缓存"/></a><div class="content"><a class="title" href="/2021/06/20/Browser-Cache/" title="浏览器的强缓存和协商缓存">浏览器的强缓存和协商缓存</a><time datetime="2021-06-20T14:18:05.000Z" title="发表于 2021-06-20 22:18:05">2021-06-20</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/06/17/Sorting/" title="排序算法汇总"><img data-lazy-src="https://jzhmcoo1-1258918430.cos.ap-shanghai.myqcloud.com/markdown/20210617235208-sorting.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="排序算法汇总"/></a><div class="content"><a class="title" href="/2021/06/17/Sorting/" title="排序算法汇总">排序算法汇总</a><time datetime="2021-06-17T15:53:46.000Z" title="发表于 2021-06-17 23:53:46">2021-06-17</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2021 By lixing</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div><div class="footer_custom_text"><a target="_blank" rel="noopener" href="http://www.beian.miit.gov.cn/"><img class="icp-icon" src="/images/icp.png"><span>备案号：沪ICP备20019376号-1</span></a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="font-plus" type="button" title="放大字体"><i class="fas fa-plus"></i></button><button id="font-minus" type="button" title="缩小字体"><i class="fas fa-minus"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><div class="search-dialog__title" id="local-search-title">本地搜索</div><div id="local-input-panel"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div></div><hr/><div id="local-search-results"></div><span class="search-close-button"><i class="fas fa-times"></i></span></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script src="/js/search/local-search.js"></script><script>var preloader = {
  endLoading: () => {
    document.body.style.overflow = 'auto';
    document.getElementById('loading-box').classList.add("loaded")
  },
  initLoading: () => {
    document.body.style.overflow = '';
    document.getElementById('loading-box').classList.remove("loaded")

  }
}
window.addEventListener('load',preloader.endLoading())</script><div class="js-pjax"><script>if (!window.MathJax) {
  window.MathJax = {
    loader: {
      source: {
        '[tex]/amsCd': '[tex]/amscd'
      }
    },
    tex: {
      inlineMath: [ ['$','$'], ["\\(","\\)"]],
      tags: 'ams'
    },
    options: {
      renderActions: {
        findScript: [10, doc => {
          for (const node of document.querySelectorAll('script[type^="math/tex"]')) {
            const display = !!node.type.match(/; *mode=display/)
            const math = new doc.options.MathItem(node.textContent, doc.inputJax[0], display)
            const text = document.createTextNode('')
            node.parentNode.replaceChild(text, node)
            math.start = {node: text, delim: '', n: 0}
            math.end = {node: text, delim: '', n: 0}
            doc.math.push(math)
          }
        }, ''],
        addClass: [200,() => {
          document.querySelectorAll('mjx-container:not([display=\'true\']').forEach( node => {
            const target = node.parentNode
            if (!target.classList.contains('has-jax')) {
              target.classList.add('mathjax-overflow')
            }
          })
        }, '', false]
      }
    }
  }
  
  const script = document.createElement('script')
  script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js'
  script.id = 'MathJax-script'
  script.async = true
  document.head.appendChild(script)
} else {
  MathJax.startup.document.state(0)
  MathJax.texReset()
  MathJax.typeset()
}</script><script>function loadValine () {
  function initValine () {
    let initData = {
      el: '#vcomment',
      appId: 'eLIUaG0QmIrM06RLR7ib4AWK-gzGzoHsz',
      appKey: '4WOHEFT9gxfwKDLWQ3Dlc1xi',
      placeholder: '英雄别着急走,留下姓名~',
      avatar: 'monsterid',
      meta: 'nick,mail,link'.split(','),
      pageSize: '10',
      lang: 'zh-CN',
      recordIP: false,
      serverURLs: '',
      emojiCDN: 'https://i0.hdslb.com/bfs/emote/',
      emojiMaps: {"2020":"dc709fac0d361370bcf0d36d32adb97df7c95824.png@112w_112h.png","热词系列_知识增加":"142409b595982b8210b2958f3d340f3b47942645.png@112w_112h.png","热词系列_梦幻联动":"4809416be5ca787c2ec3e897e4fd022a58da6e0e.png@112w_112h.png","热词系列_希望没事":"6c0d2e6c486d1ba5afd6204a96e102652464a01d.png@112w_112h.png","热词系列_泪目":"bba3703ab90b7d16fe9dbcb85ed949db687f8331.png@112w_112h.png","热词系列_保护":"55f8f6445ca7c3170cdfc5b16036abf639ce9b57.png@112w_112h.png","热词系列_害怕":"d77e2de26da143249f0c0ad7a608c27152c985bf.png@112w_112h.png","热词系列_爱了爱了":"2a165b555ba20391316366c664ed7891883dc5aa.png@112w_112h.png","热词系列_吹爆":"b528220f9c37256ed6a37f05bf118e44b08b81e5.png@112w_112h.png","热词系列_三连":"21f15fe11b7a84d2f2121c16dec50a4e4556f865.png@112w_112h.png","热词系列_可以":"e08543c71202b36c590094417fcfbb80c3506cd8.png@112w_112h.png","热词系列_打卡":"a9cf77c78e1b9b40aa3ed4862402fba008ee2f51.png@112w_112h.png","热词系列_妙啊":"0e98299d7decf5eaffad854977946075c3e91cb8.png@112w_112h.png","热词系列_这次一定":"a01ca28923daa7cc896c42f27deb4914e20dd572.png@112w_112h.png","热词系列_AWSL":"c37f88cf799f9badf9d84b7671dc3dd98c0fc0c2.png@112w_112h.png","热词系列_递话筒":"98e6950e39fbb4dd1c576042063ca632074070ba.png@112w_112h.png","热词系列_你细品":"535e00658e7e47966f154d3a167fa2365ebc4321.png@112w_112h.png","热词系列_咕咕":"d8065c2e7ce48c929317a94553499a46fecc262a.png@112w_112h.png","热词系列_你可真星":"54c8ddff400abfe388060cabfbb579280fdea1be.png@112w_112h.png","热词系列_标准结局":"3de98174b510cf7dc5fd1bd08c5d881065e79137.png@112w_112h.png","热词系列_危":"5cc6c3357c4df544dd8de9d5c5c0cec97c7c9a56.png@112w_112h.png","热词系列_张三":"255a938f39cea625032b6650036b31aa26c50a3c.png@112w_112h.png","热词系列_害":"cbe798a194612958537c5282fcca7c3bcd2aa15c.png@112w_112h.png","热词系列_我裂开了":"29bd57ec4e8952880fea6c9e47aee924e91f10c4.png@112w_112h.png","热词系列_有内味了":"7ca61680a905b5b6e2e335c630e725b648b03b4d.png@112w_112h.png","热词系列_猛男必看":"c97064450528a0e45c7e7c365a15fbb13fd61d8c.png@112w_112h.png","热词系列_奥力给":"c9b8683827ec6c00fea5327c9bec14f581cef2aa.png@112w_112h.png","热词系列_问号":"c1d1e76c12180adc8558f47006fe0e7ded4154bb.png@112w_112h.png","热词系列_我哭了":"9e0b3877d649aaf6538fbdd3f937e240a9d808e4.png@112w_112h.png","热词系列_高产":"9db817cba4a7f4a42398f3b2ec7c0a8e0c247c42.png@112w_112h.png","热词系列_我酸了":"a8cbf3f6b8cd9377eeb15b9172f3cd683b2e4650.png@112w_112h.png","热词系列_真香":"e68497c775feaac1c3b1a6cd63a50cfb11b767c4.png@112w_112h.png","热词系列_我全都要":"d424d1ad8d14c1c9b8367842bc68c658b9229bc1.png@112w_112h.png","热词系列_神仙UP":"a49e0d0db1e7d35a0f7411be13208951ab448f03.png@112w_112h.png","热词系列_你币有了":"84820c2b147a8ca02f3c4006b63f76c6313cbfa0.png@112w_112h.png","热词系列_不愧是你":"9ff2e356797c57ee3b1675ade0883d2d2247be9b.png@112w_112h.png","热词系列_锤":"35668cc12ae25b9545420e4a85bf21a0bfc03e5d.png@112w_112h.png","热词系列_秀":"50782fbf5d9b7f48f9467b5c53932981e321eedc.png@112w_112h.png","热词系列_爷关更":"faad40c56447f1f8abcb4045c17ce159d113d1fd.png@112w_112h.png","热词系列_有生之年":"f41fdafe2d0fbb8e8bc1598d2cf37e355560103a.png@112w_112h.png","热词系列_镇站之宝":"24e7a6a6e6383c987215fb905e3ee070aca259b5.png@112w_112h.png","热词系列_我太南了":"a523f3e4c63e4db1232365765d0ec452f83be97e.png@112w_112h.png","热词系列_完结撒花":"ea9db62ff5bca8e069cd70c4233353a802835422.png@112w_112h.png","热词系列_大师球":"f30089248dd137c568edabcb07cf67e0f6e98cf3.png@112w_112h.png","热词系列_知识盲区":"ccc94600b321a28116081e49ecedaa4ee8728312.png@112w_112h.png","热词系列_“狼火”":"33ccd3617bfa89e9d1498b13b7542b63f163e5de.png@112w_112h.png","口罩":"3ad2f66b151496d2a5fb0a8ea75f32265d778dd3.png@112w_112h.png","微笑":"685612eadc33f6bc233776c6241813385844f182.png@112w_112h.png","笑":"81edf17314cea3b48674312b4364df44d5c01f17.png@112w_112h.png","呲牙":"b5a5898491944a4268360f2e7a84623149672eb6.png@112w_112h.png","OK":"4683fd9ffc925fa6423110979d7dcac5eda297f4.png@112w_112h.png","星星眼":"63c9d1a31c0da745b61cdb35e0ecb28635675db2.png@112w_112h.png","哦呼":"362bded07ea5434886271d23fa25f5d85d8af06c.png@112w_112h.png","嫌弃":"de4c0783aaa60ec03de0a2b90858927bfad7154b.png@112w_112h.png","喜欢":"8a10a4d73a89f665feff3d46ca56e83dc68f9eb8.png@112w_112h.png","酸了":"92b1c8cbceea3ae0e8e32253ea414783e8ba7806.png@112w_112h.png","大哭":"2caafee2e5db4db72104650d87810cc2c123fc86.png@112w_112h.png","害羞":"9d2ec4e1fbd6cb1b4d12d2bbbdd124ccb83ddfda.png@112w_112h.png","无语":"44667b7d9349957e903b1b62cb91fb9b13720f04.png@112w_112h.png","疑惑":"b7840db4b1f9f4726b7cb23c0972720c1698d661.png@112w_112h.png","调皮":"8290b7308325e3179d2154327c85640af1528617.png@112w_112h.png","喜极而泣":"485a7e0c01c2d70707daae53bee4a9e2e31ef1ed.png@112w_112h.png","奸笑":"bb84906573472f0a84cebad1e9000eb6164a6f5a.png@112w_112h.png","偷笑":"6c49d226e76c42cd8002abc47b3112bc5a92f66a.png@112w_112h.png","大笑":"ca94ad1c7e6dac895eb5b33b7836b634c614d1c0.png@112w_112h.png","阴险":"ba8d5f8e7d136d59aab52c40fd3b8a43419eb03c.png@112w_112h.png","捂脸":"6921bb43f0c634870b92f4a8ad41dada94a5296d.png@112w_112h.png","囧":"12e41d357a9807cc80ef1e1ed258127fcc791424.png@112w_112h.png","呆":"33ad6000d9f9f168a0976bc60937786f239e5d8c.png@112w_112h.png","抠鼻":"cb89184c97e3f6d50acfd7961c313ce50360d70f.png@112w_112h.png","惊喜":"0afecaf3a3499479af946f29749e1a6c285b6f65.png@112w_112h.png","惊讶":"f8e9a59cad52ae1a19622805696a35f0a0d853f3.png@112w_112h.png","笑哭":"c3043ba94babf824dea03ce500d0e73763bf4f40.png@112w_112h.png","妙啊":"b4cb77159d58614a9b787b91b1cd22a81f383535.png@112w_112h.png","doge":"bba7c12aa51fed0199c241465560dfc2714c593e.png@112w_112h.png","滑稽":"d15121545a99ac46774f1f4465b895fe2d1411c3.png@112w_112h.png","吃瓜":"4191ce3c44c2b3df8fd97c33f85d3ab15f4f3c84.png@112w_112h.png","打call":"431432c43da3ee5aab5b0e4f8931953e649e9975.png@112w_112h.png","点赞":"1a67265993913f4c35d15a6028a30724e83e7d35.png@112w_112h.png","鼓掌":"895d1fc616b4b6c830cf96012880818c0e1de00d.png@112w_112h.png","尴尬":"cb321684ed5ce6eacdc2699092ab8fe7679e4fda.png@112w_112h.png","冷":"cb0ebbd0668640f07ebfc0e03f7a18a8cd00b4ed.png@112w_112h.png","灵魂出窍":"43d3db7d97343c01b47e22cfabeca84b4251f35a.png@112w_112h.png","委屈":"d2f26cbdd6c96960320af03f5514c5b524990840.png@112w_112h.png","傲娇":"010540d0f61220a0db4922e4a679a1d8eca94f4e.png@112w_112h.png","疼":"905fd9a99ec316e353b9bd4ecd49a5f0a301eabf.png@112w_112h.png","吓":"9c10c5ebc7bef27ec641b8a1877674e0c65fea5d.png@112w_112h.png","生病":"0f25ce04ae1d7baf98650986454c634f6612cb76.png@112w_112h.png","吐":"06946bfe71ac48a6078a0b662181bb5cad09decc.png@112w_112h.png","嘘声":"e64af664d20716e090f10411496998095f62f844.png@112w_112h.png","捂眼":"c5c6d6982e1e53e478daae554b239f2b227b172b.png@112w_112h.png","思考":"cfa9b7e89e4bfe04bbcd34ccb1b0df37f4fa905c.png@112w_112h.png","再见":"fc510306bae26c9aec7e287cdf201ded27b065b9.png@112w_112h.png","翻白眼":"eba54707c7168925b18f6f8b1f48d532fe08c2b1.png@112w_112h.png","哈欠":"888d877729cbec444ddbd1cf4c9af155a7a06086.png@112w_112h.png","奋斗":"bb2060c15dba7d3fd731c35079d1617f1afe3376.png@112w_112h.png","墨镜":"3a03aebfc06339d86a68c2d893303b46f4b85771.png@112w_112h.png","撇嘴":"531863568e5668c5ac181d395508a0eeb1f0cda4.png@112w_112h.png","难过":"a651db36701610aa70a781fa98c07c9789b11543.png@112w_112h.png","抓狂":"4c87afff88c22439c45b79e9d2035d21d5622eba.png@112w_112h.png","生气":"3195714219c4b582a4fb02033dd1519913d0246d.png@112w_112h.png","视频卫星":"dce6fc7d6dfeafff01241924db60f8251cca5307.png@112w_112h.png","11周年":"d3b2d5dc028c75ae4df379f4c3afbe186d0f6f9b.png@112w_112h.png","鸡腿":"c7860392815d345fa69c4f00ef18d67dccfbd574.png@112w_112h.png","干杯":"8da12d5f55a2c7e9778dcc05b40571979fe208e6.png@112w_112h.png","爱心":"ed04066ea7124106d17ffcaf75600700e5442f5c.png@112w_112h.png","锦鲤":"643d6c19c8164ffd89e3e9cdf093cf5d773d979c.png@112w_112h.png","胜利":"b49fa9f4b1e7c3477918153b82c60b114d87347c.png@112w_112h.png","加油":"c7aaeacb21e107292d3bb053e5abde4a4459ed30.png@112w_112h.png","保佑":"fafe8d3de0dc139ebe995491d2dac458a865fb30.png@112w_112h.png","抱拳":"89516218158dbea18ab78e8873060bf95d33bbbe.png@112w_112h.png","响指":"1b5c53cf14336903e1d2ae3527ca380a1256a077.png@112w_112h.png","支持":"3c210366a5585706c09d4c686a9d942b39feeb50.png@112w_112h.png","拥抱":"41780a4254750cdaaccb20735730a36044e98ef3.png@112w_112h.png","怪我咯":"07cc6077f7f7d75b8d2c722dd9d9828a9fb9e46d.png@112w_112h.png","跪了":"f2b3aee7e521de7799d4e3aa379b01be032698ac.png@112w_112h.png","黑洞":"e90ec4c799010f25391179118ccd9f66b3b279ba.png@112w_112h.png","老鼠":"8e6fb491eb1bb0d5862e7ec8ccf9a3da12b6c155.png@112w_112h.png","福到了":"5de5373d354c373cf1617b6b836f3a8d53c5a655.png@112w_112h.png","加油武汉":"eb966aaa5b690d3f9308a9f936f5b5a72a7f956b.png@112w_112h.png"},
      enableQQ: false,
      path: window.location.pathname,
    }

    if (true) { 
      initData.requiredFields= ('nick,mail'.split(','))
    }
    
    if (false) {
      const otherData = false
      initData = Object.assign(initData, otherData)
    }
    
    const valine = new Valine(initData)
  }

  if (typeof Valine === 'function') initValine() 
  else getScript('https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js').then(initValine)
}

if ('Valine' === 'Valine' || !false) {
  if (false) btf.loadComment(document.getElementById('vcomment'),loadValine)
  else setTimeout(loadValine, 0)
} else {
  function loadOtherComment () {
    loadValine()
  }
}</script></div><script defer="defer" id="ribbon" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-ribbon.min.js" size="150" alpha="0.6" zIndex="-1" mobile="false" data-click="false"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div></body></html>